'use client'

import { useEffect, useRef } from 'react'
import Image from 'next/image'
import Link from 'next/link'

interface Product {
    name: string
    slug: string
    image: string
    description: string
    category: string
}

interface HomeProductCarouselProps {
    products: Product[]
}

export default function HomeProductCarousel({ products }: HomeProductCarouselProps) {
    const containerRef = useRef<HTMLDivElement>(null)
    const scrollIntervalRef = useRef<NodeJS.Timeout>()

    useEffect(() => {
        const container = containerRef.current
        if (!container) return

        const scroll = () => {
            const scrollAmount = 300 // 每次滚动的距离
            const maxScroll = container.scrollWidth - container.clientWidth

            if (container.scrollLeft >= maxScroll) {
                // 滚动到末尾时，平滑回到开始
                container.scrollTo({
                    left: 0,
                    behavior: 'smooth'
                })
            } else {
                // 向右滚动
                container.scrollTo({
                    left: container.scrollLeft + scrollAmount,
                    behavior: 'smooth'
                })
            }
        }

        // 开始自动滚动
        scrollIntervalRef.current = setInterval(scroll, 3000) // 每3秒滚动一次

        // 鼠标悬停时暂停滚动
        const handleMouseEnter = () => {
            if (scrollIntervalRef.current) {
                clearInterval(scrollIntervalRef.current)
            }
        }

        // 鼠标离开时恢复滚动
        const handleMouseLeave = () => {
            scrollIntervalRef.current = setInterval(scroll, 3000)
        }

        container.addEventListener('mouseenter', handleMouseEnter)
        container.addEventListener('mouseleave', handleMouseLeave)

        return () => {
            if (scrollIntervalRef.current) {
                clearInterval(scrollIntervalRef.current)
            }
            container.removeEventListener('mouseenter', handleMouseEnter)
            container.removeEventListener('mouseleave', handleMouseLeave)
        }
    }, [])

    const handleScroll = (direction: 'left' | 'right') => {
        const container = containerRef.current
        if (!container) return

        const scrollAmount = 300
        const maxScroll = container.scrollWidth - container.clientWidth

        if (direction === 'left') {
            container.scrollTo({
                left: container.scrollLeft - scrollAmount,
                behavior: 'smooth'
            })
        } else {
            if (container.scrollLeft >= maxScroll) {
                container.scrollTo({
                    left: 0,
                    behavior: 'smooth'
                })
            } else {
                container.scrollTo({
                    left: container.scrollLeft + scrollAmount,
                    behavior: 'smooth'
                })
            }
        }
    }

    return (
        <div className="relative group">
            <div
                ref={containerRef}
                className="products-container overflow-x-auto pb-6 -mx-4 px-4 scrollbar-none"
                style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
            >
                <div className="grid grid-flow-col auto-cols-max gap-6">
                    {products.map((product) => (
                        <div
                            key={product.name}
                            className="bg-white rounded-lg shadow-md overflow-hidden w-[300px]"
                        >
                            <div className="relative h-[300px]">
                                <Image
                                    src={product.image}
                                    alt={product.name}
                                    fill
                                    className="object-cover"
                                />
                            </div>
                            <div className="p-4">
                                <h3 className="text-lg font-semibold mb-2">
                                    {product.name}
                                </h3>
                                <p className="text-gray-600 text-sm mb-4 line-clamp-2">
                                    {product.description}
                                </p>
                                <Link
                                    href={`/products/${product.slug}`}
                                    className="inline-flex items-center text-primary hover:text-primary-dark"
                                >
                                    查看详情
                                    <svg className="w-5 h-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                    </svg>
                                </Link>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* 左右导航按钮 */}
            <button
                onClick={() => handleScroll('left')}
                className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-6 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 z-10 transition-opacity opacity-0 group-hover:opacity-100"
                aria-label="向左滚动"
            >
                <svg
                    className="w-6 h-6 text-gray-600"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 19l-7-7 7-7"
                    />
                </svg>
            </button>

            <button
                onClick={() => handleScroll('right')}
                className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-6 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 z-10 transition-opacity opacity-0 group-hover:opacity-100"
                aria-label="向右滚动"
            >
                <svg
                    className="w-6 h-6 text-gray-600"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 5l7 7-7 7"
                    />
                </svg>
            </button>
        </div>
    )
} 